/*大屏*/
(function () {
    'use strict';
    var myChart = echarts.init(document.getElementById('left-mid-nong'));

    // 初始化图表配置
    function initChart(data) {
        var option = {
            tooltip: {},
            legend: [{
                    // 设置布局方向
                    orient: 'vertical',
                    // 文字和图形对齐方式
                    align: 'left',
                    right: '25%',
                    top: '10%',
                    // 图形形状
                    icon: 'circle',
                    padding: [20, 0, 0, 0],
                    itemGap: 20,
                    textStyle: {
                        borderRadius: 100,
                        color:'#fff'
                    },
                    data: ["1", '2', "3", "4", "5"]
                },
                // {
                //     orient: 'vertical',
                //     right: '6%',
                //     top: '10%',
                //     padding: [20, 0, 0, 0],
                //     itemGap: 20,
                //     // 文字和图形对齐方式
                //     align: 'left',
                //     // 图形形状
                //     icon: 'circle',
                //     textStyle: {
                //         borderRadius: 100,
                //         color:'#fff'
                //     },
                //     data: ["不拥堵", '基本畅通', "轻度拥堵", "中度拥堵", "严重拥堵"]
                // }
            ],

            series: [{
                name: '统计',
                type: 'pie',
                radius: '50%',
                right: '40%',
                bottom:'10%',
                data: data
            }]
        };
        
        myChart.setOption(option);
    }

    // 从后端获取数据并更新图表
    function updateChart() {
        fetch('http://localhost:5000/rankcount')
            .then(response => response.json())
            .then(data => {
                initChart(data);
            })
            .catch(error => console.error('获取数据失败:', error));
    }

    // 首次加载
    updateChart();

    // 每10秒更新一次数据
    setInterval(updateChart, 10000);

    // 窗口大小改变时调整图表
    window.addEventListener('resize', function() {
        myChart.resize();
    });
})();